<template>
  <div class="app-container" v-if="data.aboutInfo">
    <el-row>
      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header"><span>主机信息</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;">
              <thead>
              <tr>
                <th class="is-leaf">
                  <div class="cell">IP</div>
                </th>
                <th class="is-leaf">
                  <div class="cell">esxi名称</div>
                </th>
                <th class="is-leaf">
                  <div class="cell">版本</div>
                </th>
                <th class="is-leaf">
                  <div class="cell">运行时间</div>
                </th>
                <th class="is-leaf">
                  <div class="cell">CPU数量</div>
                </th>
                <th class="is-leaf">
                  <div class="cell">总内存</div>
                </th>
                <th class="is-leaf">
                  <div class="cell">已用内存</div>
                </th>
                <th class="is-leaf">
                  <div class="cell">BIOS版本</div>
                </th>
                <th class="is-leaf">
                  <div class="cell">BIOS发布时间</div>
                </th>
              </tr>
              </thead>
              <tbody>
              <tr v-if="data.aboutInfo">
                <td>
                  <div class="cell">{{ data.aboutInfo.ip }}</div>
                </td>
                <td>
                  <div class="cell">{{ data.aboutInfo.name }}</div>
                </td>
                <td>
                  <div class="cell">{{ data.aboutInfo.version }}</div>
                </td>
                <td>
                  <div class="cell">{{ data.aboutInfo.runTime }}天</div>
                </td>
                <td>
                  <div class="cell">{{ data.aboutInfo.cpuNum }}</div>
                </td>
                <td>
                  <div class="cell">{{ data.aboutInfo.memTotal }}</div>
                </td>
                <td>
                  <div class="cell">{{ data.aboutInfo.memUsed }}</div>
                </td>
                <td>
                  <div class="cell">{{ data.aboutInfo.biosVersion }}</div>
                </td>
                <td>
                  <div class="cell">{{ data.aboutInfo.biosDate }}</div>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header"><span>存储</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;">
              <thead>
              <tr>
                <th class="is-leaf">
                  <div class="cell">名称</div>
                </th>
                <th class="is-leaf">
                  <div class="cell">类型</div>
                </th>
                <th class="is-leaf">
                  <div class="cell">容量</div>
                </th>
                <th class="is-leaf">
                  <div class="cell">可用</div>
                </th>
              </tr>
              </thead>
              <tbody v-if="data.boomDataStores">
              <tr v-for="boomDataStore in data.boomDataStores">
                <td>
                  <div class="cell">{{ boomDataStore.name }}</div>
                </td>
                <td>
                  <div class="cell">{{ boomDataStore.type }}</div>
                </td>
                <td>
                  <div class="cell">{{ boomDataStore.diskTotal }}</div>
                </td>
                <td>
                  <div class="cell">{{ boomDataStore.diskFree }}</div>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header"><span>虚拟机信息</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;">
              <thead>
              <tr>
                <th class="is-leaf">
                  <div class="cell">名称</div>
                </th>
                <th class="is-leaf">
                  <div class="cell">描述</div>
                </th>
                <th class="is-leaf">
                  <div class="cell">系统类型</div>
                </th>
                <th class="is-leaf">
                  <div class="cell">容量</div>
                </th>
                <th class="is-leaf">
                  <div class="cell">已配置</div>
                </th>
                <th class="is-leaf">
                  <div class="cell">总内存</div>
                </th>
                <th class="is-leaf">
                  <div class="cell">已用内存</div>
                </th>
                <th class="is-leaf">
                  <div class="cell">CPU数量</div>
                </th>
                <th class="is-leaf">
                  <div class="cell">IP</div>
                </th>
                <th class="is-leaf">
                  <div class="cell">状态</div>
                </th>
              </tr>
              </thead>
              <tbody v-if="data.boomVirtualMachines">
              <tr v-for="boomVirtualMachine in data.boomVirtualMachines">
                <td>
                  <div class="cell">{{ boomVirtualMachine.name }}</div>
                </td>
                <td>
                  <div class="cell">{{ boomVirtualMachine.desc }}</div>
                </td>
                <td>
                  <div class="cell">{{ boomVirtualMachine.operateSystem }}</div>
                </td>
                <td>
                  <div class="cell">{{ boomVirtualMachine.diskTotal }}</div>
                </td>
                <td>
                  <div class="cell">{{ boomVirtualMachine.diskUsed }}</div>
                </td>
                <td>
                  <div class="cell">{{ boomVirtualMachine.memTotal }}</div>
                </td>
                <td>
                  <div class="cell">{{ boomVirtualMachine.memUsed }}</div>
                </td>
                <td>
                  <div class="cell">{{ boomVirtualMachine.cpuNum }}</div>
                </td>
                <td>
                  <div class="cell">{{ boomVirtualMachine.ip }}</div>
                </td>
                <td>
                  <div class="cell" :class="{'text-danger': boomVirtualMachine.status === 'gray'}">
                    {{ boomVirtualMachine.status === 'gray' ? "关机" : "正常" }}
                  </div>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
  <div style="text-align: center; font-size: xx-large; color: #999999; margin-top: 100px" v-else>
    <div v-if="data.result === 0">
      <i class="el-icon-connection"></i> 连接中，请稍后.......
    </div>
    <div v-else-if="data.result === 2">
      <i class="el-icon-warning"></i> 连接异常
    </div>
  </div>
</template>

<script>

import {list} from "@/api/boomMonitor/vmware";

export default {
  name: "vmware",
  data() {
    return {
      loading: true,
      data: {result: 0}
    }
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      list(this.$route.query).then(response => {
        this.data = response;
        this.loading = false;
      }).catch(e => {
        this.data.result = 2;
      });
    }
  }
}
</script>
